<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{ title }}</h2>
    <p>
        组件就是用户自定义的标签，既然是标签，那么我们可以尝试在标签的内部存放数据
    </p>
    <p>
        slot 是 vuejs 内置的一个组件，用于显示组件调用时候内部传递的数据
    </p>

    <i-show>我是ishow要展示的内容</i-show>

</div>
</body>

<template id="showTmp">
    <div>
        <h2>我是ishow组件</h2>
        <slot></slot>
    </div>
</template>

<script src="lib/vue/vue.js"></script>

<script type="text/javascript">

    Vue.component('i-show', {
        data() {
            return {
                money: 1000,
            }
        },
        template: '#showTmp',

    })

    const vm = new Vue({
        el: '#app',
        data: {
            title: 'vuejs 组件的插槽',
        }
    })
</script>

</html>
